<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/icon/logo2.png" mode=""></image>
		</view>
		<view class="title">
			双猴Farm
		</view>
		<view class="inputbox">
			<input type="number" v-model="mobile" placeholder="请输入手机号" />
		</view>
		<view class="inputbox">
			<input type="password" v-model="password" placeholder="请输入新密码" />
		</view>
		<view class="inputbox">
			<input type="password" v-model="confirm_password" placeholder="请确认新密码" />
		</view>
		<view class="inputbox">
			<input type="number" v-model="sms_code" placeholder="请输入验证码" />
			<view v-show="!yan" @click="sendsms" class="minibtn">获取验证码</view>
			<view v-show="yan" class="minibtn1">{{second}}s</view>
		</view>
		<view class="mybtn" @click="chongzhi">
			重置密码
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				password:'',
				sms_code:'',
				confirm_password:'',
				yan:false,
				second:60
			}
		},
		onLoad() {
			
		},
		methods: {
			chongzhi(){
				if(this.mobile !=''&&this.password !=''&&this.confirm_password !=''&&this.sms_code !=''){
					this.http({
						url:'/api/Login/findpassword',
						method:'POST',
						data:{
							mobile:this.mobile,
							password:this.password,
							confirm_password:this.confirm_password,
							sms_code:this.sms_code,
						},
						success:(res)=>{
							console.log(res)
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							setTimeout(() =>{
								uni.redirectTo({
									url:'./login'
								})	
							}, 1000);
						}
					})
				}else{
					uni.showToast({
						title:'请正确输入内容',
						icon:'none'
					})
				}
			},
			sendsms(){
				if(this.mobile !=''){
					if(this.yan ){
						return false
					}
					this.yan = true
					
					this.http({
						url:'/api/Login/sendsms',
						method:'POST',
						data:{
						  mobile:this.mobile
						},
						success:res=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							let interval = setInterval(() => {
							        --this.second
							    }, 1000)
							setTimeout(() =>{
								 clearInterval(interval)
								 this.second =60
								 this.yan = false
							}, 60000);
						},
						fail:err =>{
						  	uni.showToast({
						  		title:res.data.msg,
						  		icon:'none'
						  	})
						},	
					})
				}else{
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		padding-bottom: 50rpx;
		.logo{
			width: 245rpx;
			height: 197rpx;
			margin: 140rpx auto 13rpx auto;
			image{
				width: 245rpx;
				height: 197rpx;
			}
		}
		.title{
			font-size: 60rpx;
			font-weight: bold;
			color: #0072FF;
			text-align: center;	
		}
		.inputbox{
			width: 600rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 3px 0px rgba(43, 43, 43, 0.18);
			border-radius: 54rpx;
			margin: 40rpx auto 0 auto;
			display: flex;
			align-items: center;
			input{
				padding-left: 69rpx;
				flex: 1;
			}
			.minibtn{
				padding-right: 51rpx;
			}
			.minibtn1{
				padding-right: 51rpx;
			}
		}
		.mybtn{
			width: 600rpx;
			height: 108rpx;
			background: #0072FF;
			margin-top: 80rpx;
			box-shadow: 0px 0px 3px 0px rgba(43, 43, 43, 0.18);
			border-radius: 54rpx;
			text-align: center;
			line-height: 108rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		
	}

	
</style>
